<template>
	<view :class="[primarySize()]">
		<view class="container">
			<view class="p30">
				<view class="item" v-for="(item,index) in jobFairs">
					<view class="fwb col3 fs34 lh60 m-ellipsis-l2"><text class="tips">{{item.state_text}}</text>{{item.name}}</view>
					<view class="mt20 flex-box">
						<image src="https://admin.mosizp.cn/static/public/icon_time_b.png" mode="aspectFill" class="ico24"></image>
						<view class="pl20 flex-grow-1 col3 fs24">{{item.start_date_text}}至{{item.end_date_text}}</view>
					</view>
					<view class="mt20 flex-box">
						<image src="https://admin.mosizp.cn/static/public/icon_address_b.png" mode="aspectFill" class="ico24"></image>
						<view class="pl20 flex-grow-1 col3 fs24">{{item.address}}</view>
					</view>
					<view class="mt20 flex-box">
						<image src="https://admin.mosizp.cn/static/public/icon_company_b.png" mode="aspectFill" class="ico24"></image>
						<view class="pl20 flex-grow-1 col3 fs24">企业{{item.company_count}} ｜ 岗位{{item.job_count}}</view>
					</view>
					<view class="mt20 flex-box">
						<image src="https://admin.mosizp.cn/static/public/icon_phone_b.png" mode="aspectFill" class="ico24"></image>
						<view class="pl20 flex-grow-1 col3 fs24">{{item.contact_mobile}}</view>
					</view>
					<view class="btn" @click="bindDetail(item.id)">进入会场</view>
				</view>
				
				<view class="nothing" v-if="jobFairsMore.nothing">
					<image src="https://admin.mosizp.cn/static/public/icon_nothing.png" mode="aspectFit"></image>
					<text>暂无招聘会信息</text>
				</view>
				<view class="g-btn3-wrap" v-else>
					<view class="g-btn3" @click="fetch()">{{jobFairsMore.text}}</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				
				jobFairs: [],
				jobFairsMore: {page:1},
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad() {
			
			this.fetch();
		},
		onReachBottom() {
			this.fetch();
		},
		methods: {
			fetch() {
			    this.$util.fetch(this, 'xilujob.job_fairs/index', {pagesize:10}, 'jobFairsMore', 'jobFairs', 'data', 'unique');
			},
			bindDetail(id){
				uni.navigateTo({
					url: '/pages/user/job_fairs_info?id='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		padding: 25rpx 30rpx 35rpx;
position: relative;
.btn{
	width: 166rpx;
	height: 62rpx;
	line-height: 62rpx;
	text-align: center;
	font-size: 28rpx;
	color: #FFFFFF;
	background: var(--primary);
	border-radius: 8rpx;
	position: absolute;
	right: 30rpx;
	bottom: 32rpx;
}
		&+& {
			margin-top: 20rpx;
		}

		.tips {
			width: 135rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			font-size: 28rpx;
			color: #FFFFFF;
			display: inline-block;
			vertical-align: top;
			margin-right: 20rpx;
			background: #FF9A19;
			border-radius: 25rpx;
		}
	}
</style>